<!-- 
 Copyright 2008 Carnegie-Mellon University
 Licensed under the Apache License, Version 2.0 (the "License"); 
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
  
   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, 
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied. See the License for the
 specific language governing permissions and limitations
 under the License.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script type="text/javascript" src="../js/external/jquery.js"></script>
<script type="text/javascript"><!-- jQuery.noConflict(); //--></script>
<script type="text/javascript" src="../js/external/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="../js/external/jquery-tipsy.js"></script>
<script type="text/javascript" src="../js/external/prototype.js"></script>
<script type="text/javascript" src="../js/resources.js.jsp"></script>
<script type="text/javascript" src="../js/shared.js"></script>
<script type="text/javascript" src="../js/evaluation_shared.js"></script>
<script type="text/javascript" src="../js/selection.js"></script>
<script type="text/javascript" src="../js/ir_evaluation.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('#evidence,label[id^="relevance_label"]').tipsy({gravity: 's'});
  $(".formObj").css('width','400px');
  if ( $('isMonolingual').checked ) {
    $('srcLangContainer').style.display='none';
  }
});
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/external/jquery-tipsy.css" type="text/css" />
<link rel="stylesheet" href="../css/external/redmond/jquery-ui-1.8.12.custom.css" type="text/css"  />
<style type="text/css">
<!--
#docContent strong {
  background-color: #FFFF44;
}

#command_list {
  width:100px;
  right: 10px;
  top:0px;
  display: none;
  position: absolute;
  padding: 5px;
  background-color: #2e6e9e;
}

#command_list a {
  font-size: 12px;
  width: 100%;
}

#command_list ul { 
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#command_list li {
  /** increase the number if there are multiple items **/
  padding-bottom: 0px;
}
-->
</style>
<title id="title"></title>
</head>
<body onLoad="init()">

<!-- NAVIGATION -->
<div id="header"></div>

<div id="togglable1">
<table width="900"  border="0" align="center" cellpadding="3" cellspacing="0">
  <tr>
    <td colspan="2">Select a pool and then topic and you will see a list of potentially relevant documents to judge. For each document, judge relevance to the topic.</td>
  </tr>
  <tr>
    <td>Topic:</td>
    <td><select id="topicList" style="width:600px" onchange="topicSelected(this.value)"></select></td>
  </tr>
  <tr>
    <td>Pool:</td>
    <td><select id="poolList" style="width:600px" onchange="topicAndPoolSelected($('topicList').value,this.value)"></select></td>     
  </tr>
</table>
</div>
<div id="loading" style="display:none">Loading ...</div>
<div id="main_block" style="display:none">
<div id="togglable2">
<table width="900"  border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#FFCCCC">
    <td> 
      <table width="100%"  border="0" cellpadding="3" cellspacing="0" bgcolor="#FFefef">
	  <tr>
	  <td valign="top">
	    Topic Details
	    <br/>
              <input type="hidden" id="topicId">
              <input type="hidden" id="externalId">
			  <br>
              <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="top"><div id="msg_question_trg" style="valign:top"></div></td>
                  <td><div id="questionTrg" style="margin-left:20px"></div></td>
                </tr>
                <tr>
                  <td valign="top"><div id="msg_narrative_trg" style="valign:top"></div></td>
                  <td><div id="narrativeTrg" style="margin-left:20px"></div></td>
                </tr>                
                <tr>
                  <td valign="top" nowrap><div id="msg_answer_type" style="valign:top"></div></td>
                  <td><div id="type" style="margin-left:20px"></div></td>
                </tr>
				<tr>
                  <td valign="top"><div id="msg_note" style="valign:top"></div></td>
                  <td><div id="note" style="margin-left:20px"></div></td>
                </tr>
            </table>
	      </td>
	    </tr>
      </table>
    </td>
  </tr>
</table>
<table width="900"  border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td bgcolor="#FFFF66">
      <table width="100%"  border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFCC">
	<tr>
	  <td valign="top">Highlight</td>
	  <td>
	  <input id="highlight" style="width:500px">
	  &nbsp;&nbsp;
	    <input type="submit" value=" Highlight " onclick="highlight()" style="width:100px"/>
	    </td>
	</tr>
    </table>
    </td>
  </tr>
</table>
</div><!-- end of togglable -->
<table width="900"  border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td bgcolor="#63FF9C"><a name="green"></a>
      <table width="100%"  border="0" cellpadding="5" cellspacing="0" bgcolor="#CCFFCC">
	<tr>
	  <td valign="top">
	  Document List: <br>
	      <select id="docList" size="20" style="width:200px" onchange="docSelected(this.value)"></select>
	      <input type="hidden" id="docId" value=""/><br>
	      Sort by <a href="javascript:loadDocs($('topicList').value,$('poolList').value,'score')">score</a>, <a href="javascript:loadDocs($('topicList').value,$('poolList').value,'docid')">id</a>, <a href="javascript:loadDocs($('topicList').value,$('poolList').value,'judgment')">judgment</a><br>
	  </td>
        <td valign="top" width="100%">
        <div style="float:right" id="toggle"><a href="javascript:void(0)">toggle</a></div>
        <div id="doc_block">
          Relevance Judgment<br>
		  <table width="100%" border="1" cellspacing="0" cellpadding="5">
		    <tr>
		      <td bgcolor="#FFFFFF">
		      	<div id="originalDocContent" style="display:none"></div>
			    <div id="docContent" class="doc"></div>
			  </td>
	        </tr>
	      </table>
		 <br>
		  <div id="labelArea"></div>
		  <div style="margin-top:10px; margin-bottom:10px">
		  Evidence:<br>
		  <textarea id="evidence" style="width:650px;height:80px;overflow-y:scroll" title="Enter sentences you based the judgment on (you can skip this the for non-relevant label)."/></textarea>
		  </div>
		  <div align="center">
	      <input type="submit" id="saveAndGoNext" value="Save and Go Next" onclick="saveAndGoNext()" style="width:300px;"/>
	      </div>
        </div>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>
<br/>
<br/>

<!-- for right clicking -->
<div id="command_list" class="ui-corner-all">
<ul><li id="command_copy"><a href="javascript:void(0);">Append</a></li></ul>
</div>

<!-- FOOTER -->
<div id="footer"></div>

</body>
</html>

